<!--表格组件-->
<template>
    <div>
        <div class="mt10 row">
            <el-button-group v-if="TableView.addBtn">
                <el-button icon="el-icon-plus" @click="TableView.addBtn.callBack">{{TableView.addBtn.name}}</el-button>
            </el-button-group>
            <div class="col tr">
                <el-button-group>
                    <el-button icon="dx icon-daoru mr10 fz16" @click="isshow">导入</el-button>
                    <el-button icon="dx icon-daochu mr10 fz16" :disabled="iszj">导出</el-button>
                    <el-button icon="el-icon-download fz16">下载导入模板</el-button>
                </el-button-group>
            </div>
        </div>
        <!-- -->
        <el-table :data="tableData" class="mt20 fz12 fdgdyuyeer" border style="width: 100%" @selection-change="handleSelectionChange" :height="clientHeight-340" v-loading="loading" element-loading-text="拼命加载中...">
            <el-table-column type="selection" width="55" align="center" v-if="TableView.IsCheck"> </el-table-column>
            <el-table-column type="index" width="50" label="序号" align="center" v-if="TableView.IsSerialNumber"></el-table-column>
            <el-table-column :prop="sd.prop" :label="sd.label" :width="sd.width" align="center" v-for="(sd,idx) in fieldList" :key="idx"></el-table-column>
            <el-table-column prop="" label="操作" align="center" width="220" fixed="right">
                <template slot-scope="scope">
                    <div class="kkmmxdert">
                        <el-button :type="sf.type" v-for="(sf,idx) in TableView.btList" :key="idx" @click="sf.callBack(scope.row)">{{sf.label}}</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <div class="pt10 pm10 btm cen fdrtrter row listpage">
            <div>
                <el-button-group>
                    <el-button icon="el-icon-edit-outline" :disabled="iszj">批量执行</el-button>
                    <el-button icon="el-icon-refresh" :disabled="iszj">批量取消</el-button>
                </el-button-group>
            </div>
            <div class="col tr">
                <el-pagination background :page-sizes="[10,15,20,30,50]" :page-size="20" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="sizechange" @current-change="currentChange">
                </el-pagination>
            </div>
        </div>
        <ImportXhl ref="daoru"></ImportXhl>
    </div>
</template>
<script>
    import ImportXhl from '@/components/util/ImportXhl'
    export default {
        props: {
            tableData: {
                type: Array,
                required: true
            },
            loading: {
                type: Boolean
            },
            clientHeight: {
                type: Number
            },
            TableView: {
                type: Object
            },
            total:{
                type:Number
            }
        },
        data() {
            return {
                fieldList: '',
                iszj: true
            }
        },
        components: {
            ImportXhl
        },
        methods: {
            isshow() {
                this.$refs.daoru.isjd()
            },
            handleSelectionChange(e) {
                if (e.length > 0) {
                    this.iszj = false
                } else {
                    this.iszj = true
                }
            },
            sizechange(){
                this.$emit('sizechange')
            },
            currentChange(e){
                this.$emit('currentChange',e)
            }
        },
        mounted() {
            this.fieldList = this.TableView.fieldList
        }
    }

</script>
<style scoped>

</style>
